<template>
    <div>
        <div class="head"></div>
        <div class="content">
          <p class="tit">{{ list.title }}</p>
          <p class="count_p">票数：{{ list.number }}</p>
          <img class="img" :src="'https://project.hangzhou.com.cn'+list.thumb_file" alt="">
          <div class="con" v-html="list.content"></div>
          <div class="vote_btn" @click="back">返回投票</div>
        </div>
 
    </div>
</template>

<script>
export default {
 name: 'detail',
 data () {
   return {
      id:'',
      list:[]
   }
 },
 created(){
    this.id = this.$route.query.id
    this.getDetail(this.id)
 },
 methods:{
  getDetail(id){
        this.$http.get('https://vote.hangzhou.com.cn/api/2023reformation/'+id).then(res=>{
          console.log(res.data.list)
          this.list = res.data.list
        })
    },
    back(){
      this.$router.push('/')
    }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.head{
 width: 100%;
 height: 466px;
 background: url('./../../static/images/head.png') no-repeat;
 background-size: 100% 100%;
}
.content{
width: 90%;
margin-left: 5%;
box-sizing: border-box;
}
.tit{
  font-size: 18px;
  font-weight: bolder;
  color: #000;
}
.count_p{
  color: #f39800;
  font-size: 16px;
}
.img{
  width: 100%;
  height: auto;
}
.con{
  margin-top: 40px;
  margin-bottom: 50px;
  text-indent: 20px;
  line-height: 30px;
}
.vote_btn{
  width: 140px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  background-color: #478ffe;
  margin-left: calc(50% - 70px);
  margin-bottom: 50px;
}
</style>
